<template>
    <div>
        <h1>员工管理</h1>
        <div>
            姓名:
            <input type="text" v-model="info.username">
           角色:
           <select v-model="info.roleid">
                            <option value="">请选择</option>
                            <option v-for="item in roles" :value="item.roleId">{{ item.roleName }}</option>
           </select> 
           <input type="button" value="查询" @click="showuser" class="btn btn-primary">
           <input type="button" value="批量启用" @click="allupdstate(1)" class="btn btn-warring">
           <input type="button" value="批量禁用" @click="allupdstate(2)" class="btn btn-info">
           <input type="button" value="导出" @click="exportexce" class="btn btn-primary">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @change="allselete"></td>
                    <td>员工编号</td>
                    <td>姓名</td>
                    <td>头像</td>
                    <td>手机号码</td>
                    <td>角色</td>
                    <td>登录密码</td>
                    <td>状态</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id" >
                    <td><input type="checkbox" v-model="ids" @change="notall" :value="item.id"></td>
                    <td>{{item.userId}}</td>
                    <td>{{item.userName}}</td>
                    <td><img :src=" item.photo " width="60" height="60"></td>
                    <td>{{item.tel}}</td>
                    <td>{{item.roleName}}</td>
                    <td>******</td>
                    <td>{{item.userState==1?'启用':'禁用'}}</td>
                    <td>{{item.userDesc}}</td>
                    <td><input type="button" value="删除" @click="deluser(item.id)" class="btn btn-success"></td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>每页{{ info.pagesize }}条</span>
            <span>共{{ info.pageindex }}/{{ data.totalPage }}页</span>
            <input type="button" value="首页" @click="page(1)" >
            <input type="button" value="上一页" @click="page(info.pageindex-1)" >
            <input type="button" v-for="item in data.totalPage" :value="item" @click="page(item)" >
            <input type="button" value="下一页" @click="page(info.pageindex+1)" >
            <input type="button" value="尾页" @click="page(data.totalPage)" >
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import moment from "moment";
import {useRouter,useRoute} from "vue-router";
const router=useRouter();
const route=useRoute();
onMounted(()=>
{
    bindrole();
    showuser();
})
let info:any=reactive({
  
  "username": "",
  "roleid": "",
  "pageindex": 1,
  "pagesize":2
   
})
let data:any=reactive({
  
   totalCount: 0,
   totalPage: 0,
   list:[]
})
const showuser=()=>
{
    
    axios({
        url:'http://localhost:5086/api/User/ShowUser',
        method:'get',
        params:info
    })
    .then((res)=>
    {
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let roles:any=ref([]);
const bindrole=()=>
{
    axios({
        url:'http://localhost:5086/api/User/BindRole',
        method:'get',
    })
    .then((res)=>
    {
        console.log(res);
        roles.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const page=(num:any)=>
{
    if(num<1)
    {
        num=1;
    }
    if(num>data.totalPage)
    {
        num=data.totalPage;
    }
    info.pageindex=num;
    showuser();
}
const deluser=(id:any)=>
{
    var f=confirm("确认删除吗?")
    if(f)
    {
        axios({
        url:'http://localhost:5086/api/User/DelUser',
        method:'delete',
        params:
        {
            id:id
        }
    })
    .then((res)=>
    {
        console.log(res);
       
        if(res.data>0)
        {
            alert("删除员工成功");
            showuser();
            return;
        }
        else
        {
            alert("删除员工失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
    }
}
let checked:any=ref(false);
let ids:any=ref([]);
const allselete=()=>
{
    console.log(checked.value);
    if(checked.value)
    {
        ids.value=data.list.map((item:any)=>
        {
            return item.id
        })
    }
    else
    {
        ids.value=[]
    }
}
const notall=()=>
{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else
    {
        checked.value=false;
    }
}
const allupdstate=(state:any)=>
{
    if(ids.value.length==0)
    {
        alert("必选一项");
        return;
    }
    var f=confirm("确认批量修改吗?")
    if(f)
    {
        axios({
        url:'http://localhost:5086/api/User/UpdStateUser',
        method:'put',
        params:
        {
            ids:ids.value.toString(),
            state:state
        }
    })
    .then((res)=>
    {
        console.log(res);
       
        if(res.data>0)
        {
            alert("修改员工状态成功");
            checked.value=false;
            ids.value=[];
            showuser();
            return;
        }
        else
        {
            alert("修改员工状态失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
    }
}
const exportexce=()=>
{
    info.pagesize=20;
    location.href=`http://localhost:5086/api/User/ExportExcel?pageindex=${info.pageindex}&pagesize=${info.pagesize}`;
}
</script>

<style scoped>

</style>